<template>
  <section class="haruyuki-bg-color-white">
    <div class="haruyuki-title haruyuki-size-16">
      <i class="el-icon-s-order"></i><span class="haruyuki-ml-6">物流详情</span>
    </div>
    <div class="haruyuki-content">
      <el-row :gutter="20">
        <el-col :span="4" >
          <span >发票类型：{{data.invoiceTypeName}}</span>
        </el-col>
        <el-col :span="4" >
          <span >邮寄时间：{{data.emailTimeShort}}</span>
        </el-col>
        <el-col :span="4" v-if="data.rimMailNo">
          <span >物流单号：{{data.rimMailNo}}</span>
        </el-col>
      </el-row>
    </div>
    <div class="haruyuki-title haruyuki-size-16">
      <i class="el-icon-s-order"></i><span class="haruyuki-ml-6">发票详情</span>
    </div>
    <div class="haruyuki-content" v-for="(item,index) in data.list" :key="index">
      <el-row :gutter="20" >
        <el-col :span="4">
          <img :src="item.link" :alt="item.link" style="width:100px;" @click="imgPreview(item.link)">
        </el-col>
        <el-col :span="4">
          <span >发票号：{{item.invoiceCode}}</span>
        </el-col>
        <el-col :span="4">
          <span >发票金额：{{item.amount}}</span>
        </el-col>
        <el-col :span="4">
          <span >发票实际金额：{{item.trueAmount}}</span>
        </el-col>
        <el-col :span="3">
          <span >审核状态：{{item.adminStateName}}</span>
        </el-col>
        <el-col :span="7" v-show="item.adminState === 2">
          <span >审核意见：{{item.comment}}</span>
        </el-col>
        <el-col :span="4" class="haruyuki-flex-center" v-if="status && (item.adminState !=1 && item.adminState !=2)">
          <span class="picture-preview" @click="$emit('completeTask', '1',item)">通过</span>
          <el-divider direction="vertical"></el-divider>
          <span class="picture-preview" @click="$emit('completeTask', '2',item)">驳回</span>
          <el-divider direction="vertical"></el-divider>
          <span class="picture-preview" @click="setMoneyShow(item)">修改金额</span>
        </el-col>
      </el-row>
    </div>
    <!-- 修改金额 -->
     <el-dialog
      title="驳回信息"
      append-to-body
      :close-on-click-modal='false'
      :close-on-press-escape='false'
      :visible.sync="moneyShow"
      v-if="moneyShow"
      width="555px"
    >
      <!-- <el-input v-model="moneyObj.amount" placeholder="请输入发票金额"></el-input> -->
      <el-input v-model.number="moneyOld" placeholder="请输入发票金额" maxlength="12"></el-input>
      <span slot="footer" class="dialog-footer">
        <el-button @click="moneyShow = false">取 消</el-button>
        <el-button type="primary" @click="moneyShowSubmit">确 定</el-button>
      </span>
    </el-dialog>
    <el-image-viewer
        style="z-index: 99999;"
        v-if="imgShow"
        :on-close="()=>{ imgShow = false }"
        :url-list="imgUrlList"
      ></el-image-viewer>
  </section>
</template>

<script>
import { getDetail} from "@/api/rb-core/invoiceMail/invoice_mail";

export default {
   props: {
    rimNo: String,
    status: {
      type: Boolean,
      default: false
    }

  },
  data() {
    return {
      loading: true,
      data: [],
      moneyShow: false,
      moneyObj:{},
      moneyOld:'',
      imgShow: false,
      imgUrlList:[]
    }
  },
  computed: {
    ids() {
      let ids = [];
      this.selectionList.forEach(ele => {
        ids.push(ele.id);
      });
      return ids.join(",");
    },
    exhibition() {
      return (val) => {
        if (val == "" || val == "-1") {
          return (val = 0);
        } else {
          return val;
        }
      };
    },
  },
  created() {
    if(this.rimNo){
      this.getData(this.rimNo);
    }
  },
  methods: {
    // 预览图片
    imgPreview(url) {
        this.imgUrlList[0] = url;
        this.imgShow = true;
    },
    // 修改金额 提交
    moneyShowSubmit(){
      this.moneyObj.amount = this.moneyOld;
      this.moneyShow = false;
    },
    // 修改金额 弹框 显示
    setMoneyShow(row){
      this.moneyObj = row;
      this.moneyOld = JSON.parse(JSON.stringify(row.amount))
      this.moneyShow = true;
    },
    // 获取详情
    getData(rimNo){
      let that = this;
      getDetail(rimNo).then(res=>{
        that.loading = false;
        that.data = res.data.data;
      })
    }
  }
};
</script>

<style lang="scss" scoped>
.picture-preview {
  color: #409eff;
  cursor: pointer;
}

.merchant-title {
  font-weight: bold;
}
.img-margin-r10{
  margin-right: 10px;
}

.haruyuki-content {
  background: #fff;
  box-shadow: 0px 0px 5px 5px #f4f4f5;
  margin-bottom: 10px;
  margin-top: 10px;
}
</style>